<template>
    <div class="post-card-box" @click.prevent="goToDetail(postInfo.id)">
        <div style="position: relative;">
            <div class="pub-info">
                <div style="display: inline-block;height: 60px;">
                    <el-avatar icon="el-icon-user-solid" :size="60" shape="circle" :src="postInfo.pubAvatar"
                        fit="fill"></el-avatar>
                </div>
                <div style="display: flex;margin-left: 10px;flex-direction: column;justify-content: center;">
                    <div style="margin-bottom: 5px;">
                        <span class="username">{{ postInfo.pubNickName ?? postInfo.pubUserName }}&ensp;</span>
                        <span v-if="fatherType===0" class="level">LV&nbsp;{{ postInfo.pubLevel ?? 0 }}</span>
                    </div>
                    <div>
                        <span class="created-time">
                            发表于&nbsp;{{ postInfo.createAt }}
                        </span>
                    </div>
                </div>

            </div>
            <div v-if="fatherType===0" class="post-status">
                <div v-if="postInfo.isTop" class="post-status-tag top">置顶</div>
                <div v-if="postInfo.isEssence" class="post-status-tag essence">精华</div>
            </div>
        </div>
        <el-row :gutter="24">
            <el-col :span="22" :offset="2">
                <div  class="title">
                    {{ postInfo.title }}
                </div>
            </el-col>
        </el-row>

        <div v-if="postInfo.coverPic" class="img-list" >
            <el-image  @click.stop="" v-for="(pic,index) in postInfo.coverPic.split(',').splice(0,3)" :src="pic" :preview-src-list="[pic]" :key="index" fit="cover" :lazy="true"></el-image>
            
        </div>
        <div class="post-footer">
            <span class="statistics">
                <i class="el-icon-view"></i>
                {{ postInfo.viewNum }}
            </span>
            <span class="statistics">
                <i class="el-icon-chat-dot-square"></i>
                {{ postInfo.commentNum }}
            </span>
            <span class="statistics">
                <svg t="1714112174115" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1506" width="14" height="14">
                    <path
                        d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z"
                        fill="#5D5D5D" p-id="1507"></path>
                    <path
                        d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
                        fill="#5D5D5D" p-id="1508"></path>
                    <path
                        d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z"
                        fill="#5D5D5D" p-id="1509"></path>
                </svg>
                {{ postInfo.likedNum }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        postInfo: {},
        communityId:null,

        fatherType:{
            default:0
        }
    },
    data() {
        return {
        }
    },
    methods: {
        goToDetail(id) {
            this.$router.push({name:'PostDetail',query:{id:id,communityId:this.postInfo.communityId}});
        }
    },

}
</script>

<style lang="scss" scoped>
.post-card-box {
    border: 1px solid #E4E7ED;
    margin-bottom: 20px;
    padding: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: 0.3s all ease;

    &:hover {
        box-shadow: 0px 3px 5px #E4E7ED;
        transition: 0.3s all ease;
    }
}

.pub-info {
    height: 60px;
    margin-bottom: 5px;
    display: flex
}

.title {

    padding: 10px 0px;
    min-height: 60px;
}



.post-footer {
    height: 20px;
    // background-color: pink;
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
}

.username {
    color: #333333;
    font-size: 15px;
    font-weight: bolder;
}

.level {
    font-size: 14px;
    color: #333333;
}

.created-time {
    color: #939393;
    font-size: 13px;
}

.post-status {
    position: absolute;
    display: inline-block;
    z-index: 0;
    top: -5px;
    right: -5px;
}

.post-status-tag {
    text-align: center;
    width: 100px;
    margin-bottom: 3px;
    position: relative;
    font-size: 12px;
    height: 16px;
    width: 80px;
    color: white;
    line-height: 16px;
    $top-back-color: rgb(255, 100, 100);

    &.top {
        background-color: $top-back-color;

        &:before {
            border-right-color: $top-back-color;
        }
    }

    $essence-back-color: rgb(255, 180, 100);

    &.essence {
        background-color: $essence-back-color;

        &:before {
            border-right-color: $essence-back-color;
        }
    }

    &:before {
        position: absolute;
        content: " ";
        border: transparent 8px solid;

        top: 0;
        left: -16px;
        height: 0;
        width: 0;
    }

}
.statistics{
    font-size: 14px;
    color: #939393;
    display: inline-block;
    width: 80px;
    margin-right: 10px;

}
.img-list{
    display: flex;
    padding-left: 60px;
    .el-image{
        margin-right: 20px;
        width: 130px;
        height: 130px;
    }
}
</style>